<template>
    <view class="charts-box">
        <qiun-data-charts
                type="mix"
                :opts="opts"
                :chartData="chartData"
                :disableScroll="true"
                :ontouch="true"
                :onzoom="true"
        />
    </view>
</template>

<script>
    import {
        reportOrderChart
    } from '../../api/api'
    export default {
        data() {
            return {
                chartData: {},
                //您可以通过修改 config-ucharts.js 文件中下标为 ['mix'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
                opts: {
                    color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
                    padding: [15,15,15,15],
                    enableScroll: false,
                    legend: {},
                    xAxis: {
                        disableGrid: true,
                        title: "单位：年"
                    },
                    yAxis: {
                        disabled: false,
                        disableGrid: false,
                        splitNumber: 5,
                        gridType: "dash",
                        dashLength: 4,
                        gridColor: "#CCCCCC",
                        padding: 10,
                        showTitle: true,
                        data: [
                            {
                                position: "left",
                                title: "折线"
                            },
                            {
                                position: "right",
                                min: 0,
                                max: 200,
                                title: "柱状图",
                                textAlign: "left"
                            }
                        ]
                    },
                    extra: {
                        mix: {
                            column: {
                                width: 20
                            }
                        }
                    }
                },
                goods_code:''
            }
        },
        onLoad(options) {
            this.goods_code = options.goods_code;
            uni.setNavigationBarTitle({
                title: this.$lang('进货统计详情')
            });
            this.getServerData();
        },
        methods: {
            getServerData() {
                reportOrderChart({
                    goods_code:this.goods_code
                }).then(res => {
                    let categories = [];
                    let column = [];
                    let line = [];
                    res.data.forEach((item,index) => {
                        categories.push(item.month);
                        column.push(item.total_amount);
                        line.push(item.total_num);
                    });
                    let data = {
                        categories: categories,
                        series: [
                            {
                                name: "",
                                index: 1,
                                type: "column",
                                data: column
                            },
                            {
                                name: "",
                                type: "line",
                                color: "#2fc25b",
                                data: line
                            },
                        ]
                    };
                    this.chartData = JSON.parse(JSON.stringify(data));
                })
                //模拟从服务器获取数据时的延时

            },
        }
    }
</script>

<style lang="scss" scoped>
    .charts-box {
        width: calc(100% - 50rpx);
        padding: 25rpx;
        height: 500rpx;
    }
</style>
